<template>
  <div class="container">
    <Header v-bind:isBack="isBack" :title="title"></Header>
    <!-- 介绍鲜花部分 -->
    <div class="view-box" style="flex-grow:8;">
      <div class="top-card">
        <div class="price fs-32">
          鲜花单价:&nbsp;
          <span class="fs-32">{{10}}元/支</span>
        </div>
        <div class="num-txt fs-28">请输入购买数量</div>
        <div class="num fs-28">
          <input type="number" oninput="value=value.replace(/[^\d]/g,'')" v-model="flowerNum" />
          <span>支</span>
        </div>
      </div>
      <!-- 支付方式 -->
      <div class="pay-method">
        <div class="title fs-28">请选择支付方式</div>
        <div class="pay" v-for="(item,index) in payWay" :key="index">
          <div class="left">
            <div class="img">
              <img :src="item.img" alt />
            </div>
            <div class="txt fs-32">{{item.text}}</div>
          </div>
          <div class="right">
            <div class="img">
              <img :src="isChecked == item.id?choose:noChoose" alt @click="checkPay(item)" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="pay-btn fs-32" @click="payOrder">需支付:￥{{payMoney}}</div>
  </div>
</template>

<script>
export default {
  name: "buy-flower",
  data() {
    return {
      title: "购买鲜花",
      isBack: true,
      payMoney: 0, //需要支付的金额
      flowerNum: null, //购买的鲜花数量
      activityId: null, //活动id
      userId: null, //参赛者id
      alipayPic: require("@/assets/index/alipay.png"),
      wxpay: require("@/assets/index/wxpay.png"),
      choose: require("@/assets/index/pay-choose.png"),
      noChoose: require("@/assets/index/pay-nochoose.png"),
      isChecked: 0, //当前选择的支付方式
      payWay: [
        {
          id: 1,
          img: require("@/assets/index/alipay.png"),
          text: "支付宝支付"
        },
        {
          id: 2,
          img: require("@/assets/index/wxpay.png"),
          text: "微信支付"
        }
      ]
    };
  },
  watch: {
    flowerNum: function() {
      if (this.flowerNum.charAt(0) == 0) {
        this.flowerNum = null;
      }
      this.payMoney = this.flowerNum * 10;
    }
  },
  components: {},
  methods: {
    // 选择支付方式
    checkPay(item) {
      this.isChecked = item.id;
      console.log(this.isChecked, "当前选中的是----", item.text);
    },
    // 点击了支付
    payOrder() {
      if (this.flowerNum == null) {
        this.AlertWin("请输入要购买的鲜花数量");
        return;
      }
      if (this.isChecked == 0) {
        this.AlertWin("请选择支付方式");
        return;
      } else if (this.isChecked == 1) {
        const url = this.$host1 + `home/audition/auditionOrder`;
        var params = {
          audition_activity_vote_time_id: this.activityId,
          flower_num: this.flowerNum,
          enter_activity_id: this.userId
        };
        this.$axios
          .post(url, params)
          .then(res => {
            console.log(res.data, "---res.data--");
            if (res.data.code == 200) {
              var code = res.data.data.order_sn;
              this.saveOrderAlipay(code);
            } else {
              this.AlertWin(res.data.message);
            }
          })
          .catch(err => {
            console.log(err, "err-----");
          });
      }
      if (this.isChecked == 2) {
        const url = this.$host1 + `home/audition/auditionOrder`;
        var params = {
          audition_activity_vote_time_id: this.activityId,
          flower_num: this.flowerNum,
          enter_activity_id: this.userId
        };
        this.$axios
          .post(url, params)
          .then(res => {
            console.log(res.data, "---res.data--");
            if (res.data.code == 200) {
              var code = res.data.data.order_sn;
              this.saveOrder(code);
            } else {
              this.AlertWin(res.data.message);
            }
          })
          .catch(err => {
            console.log(err, "err-----");
          });
      }
    },
    // 鲜花下单---微信
    saveOrder(code) {
      if (this.isapp == 0) {
        const url = this.$host1 + `pay/index?order_number=` + code;
        window.location.href = url;
      } else if (this.isapp) {
        var sendData = {
          type: "3",
          data: code
        };
        window.postMessage(JSON.stringify(sendData));
      }
    },
    // 鲜花下单---支付宝
    saveOrderAlipay(code) {
      if (this.isapp == 0) {
        const url = this.$host1 + `ali_pay_flower.php?order_number=` + code;
        window.location.href = url;
      } else if (this.isapp) {
        var sendData = {
          type: "8",
          data: code
        };
        window.postMessage(JSON.stringify(sendData));
      }
    }
  },
  created() {
    this.activityId = this.$route.query.id;
    this.userId = this.$route.query.userId;
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container {
  height: 100vh;
  padding-top: 1rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .top-card {
    padding: 0.39rem 0.24rem 0.32rem;
    box-sizing: border-box;
    background-color: #fff;
    width: 100%;
    margin-bottom: 0.24rem;
    .price {
      font-weight: bold;
      color: rgba(68, 68, 68, 1);
      margin-bottom: 0.76rem;
      span {
        color: #f44349;
      }
    }
    .num-txt {
      font-weight: 500;
      color: rgba(68, 68, 68, 1);
      margin-bottom: 0.29rem;
    }
    .num {
      width: 98%;
      margin: 0 auto;
      height: 0.8rem;
      border: 0.015rem solid rgba(153, 153, 153, 1);
      border-radius: 0.06rem;
      input {
        width: 90%;
        height: 95%;
        text-indent: 0.2rem;
      }
      span {
      }
    }
  }

  .pay-method {
    padding: 0.43rem 0.25rem 0;
    box-sizing: border-box;
    background-color: #fff;
    .title {
      font-weight: 500;
      color: rgba(153, 153, 153, 1);
      margin-bottom: 0.4rem;
    }
    .pay {
      display: flex;
      height: 1rem;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        .img {
          width: 0.48rem;
          height: 0.48rem;
          margin-right: 0.24rem;
          img {
            width: 100%;
          }
        }
        .txt {
          font-weight: 500;
          color: rgba(68, 68, 68, 1);
        }
      }
      .right {
        .img {
          width: 0.44rem;
          height: 0.44rem;
          img {
            width: 100%;
          }
        }
      }
    }
  }

  .pay-btn {
    // position: fixed;
    // left: 0;
    // bottom: 0;
    width: 100%;
    height: 1rem;
    background-color: #540479;
    font-weight: bold;
    text-align: center;
    line-height: 1rem;
    color: rgba(255, 255, 255, 1);
  }
}
</style>
